<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./static/css/style.css" rel="stylesheet">
    <style lang="less" scoped>
        html, body, .home, .content {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .home {
            background-image: url("./static/img/sg-home-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .title {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 10em;
            color: #FFFFFF;
            background: linear-gradient(0deg, #90D0F9 0%, #FCFFFC 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        .huanying {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 28em;
            color: #FFFFFF;
            background: linear-gradient(0deg, #90D0F9 0%, #FCFFFC 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding: 0.1% 0;
            text-align: center;
        }
        .state {
            background-image: url("./static/img/sg-text-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 100%;
            padding-top: 1.6em;
            /*height: 150px;*/
            margin: 0 auto;
            text-align: center;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 14em;
            color: #FFCC00;
            position: relative;
        }
        /**
         * <!-- 信息 -->
         */
        .content {
            background-image: url("./static/img/sg-cont-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .content-title {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 7em;
            color: #FFFFFF;
            background: linear-gradient(0deg, #FFFFFF 0%, #C9E0FF 49.755859375%, #BCCCF8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            padding: 0.5% 0 0 0;
        }
        .cont {
            flex: 1;
            /*padding: 90px 88px;*/
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .cont-top {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
        .item {
            width: 85.2%;
            background-image: url("./static/img/sg-itembg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
        }
        .item1 {
            width: 85.2%;
            box-sizing: border-box;
            margin-top: 7%;
        }
        .item1-box {
            position: absolute; top: 0; left: 0;width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
        }
        .car {
            display: inline-block;
            margin-right: 29px;
            height: 100%;
        }
        #car-img {
            height: 100%;
        }
        .car-no {
            width: 69.8%;
            height: 63.598%;
            background-image: url("./static/img/sg-car-no.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .car-text {
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 17em;
            color: #FDFDFF;
            background: linear-gradient(0deg, #BDC2FF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            word-break: break-all;
            overflow: hidden;
            white-space: nowrap;
        }
        .item2 {
            width: 85.2%;
            /*height: 350px;*/
            padding-top: 38.9%;
            box-sizing: border-box;
            margin-top: 0.09%;
        }
        .item2-box {
            position: absolute; top: 0; left: 0;width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
        }
        .itemView {
            width: 100%;
            height: 22%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 7em;
            font-weight: 500;
        }
        .icon-box {
            height: 100%;
            margin-left: 5%;
        }
        .icon {
            width: 1.2em;
            margin-top: 0.22em;
        }
        .til {
            width: 4.6em;
            height: 100%;
            font-family: PingFang SC;
            color: #FDFDFF;
            margin: 0 0 0 1%;
            text-align: left;
        }
        .con {
            width: 60%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-family: Source Han Sans CN;
            color: #FFCC00;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
            text-wrap: nowrap;
        }
        .con2 {
            height: 100%;
            position: relative;
        }
        .con2-car-type {
            width: 100%;
            height: 100%;
            display: inline-block;
            text-align: left;
            position: absolute;
            top: 0;
            right: 0;
        }
        .cont-bottom {
            width: 85.2%;
            /*height: 172px;*/
            padding-top: 16.7%;
            margin: 1.3% auto auto auto;
            background-image: url("./static/img/sg-state-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
        }
        .cont-bottom-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cont-bottom-text {
            width: 100%;
            height: 100%;
            position: relative;
            text-align: center;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 140px;
            color: #e3f0ff;
            white-space: nowrap;
            overflow: hidden;
        }
        .message-box {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script>
        // 设置根元素字体大小
        function setRootFontSize() {
            // 获取屏幕宽度
            let viewWidth = document.documentElement.clientWidth;
            let viewHeight = document.documentElement.clientHeight;
            let newSize
            if (viewWidth >= viewHeight) {
                newSize = viewHeight
            } else {
                newSize = viewWidth
            }
            // 设定基准宽度
            const baseWidth = 1920;
            // 计算宽度缩放比例
            const scale = newSize / baseWidth;
            console.log("缩放比", scale)
            // 计算根元素字体大小
            const rootFontSize = 16 * scale;
            // 设置根元素字体大小
            document.documentElement.style.fontSize = `${rootFontSize}px`;
        }
        // 初始化设置根元素字体大小
        setRootFontSize();
        // 监听窗口大小变化，重新设置根元素字体大小
        window.addEventListener('resize', setRootFontSize);
        // 重设可视页面大小
        window.onload = function () {
            setClientSize()
        }
        // 重设可视页面大小
        window.onresize = function () {
            setClientSize()
        }
        // 重设可视页面大小
        function setClientSize () {
            let viewWidth = document.documentElement.clientWidth;
            let viewHeight = document.documentElement.clientHeight;
            // console.log('页面宽高自适应', viewWidth, viewHeight)
            // 可视区域宽高
            document.getElementById('bodyBox').style.width = viewWidth + 'px'
            document.getElementById('bodyBox').style.height = viewHeight + 'px'
            // 顶部标题
            // document.getElementsByClassName('content-title')[0].style.paddingTop = (viewHeight * 0.011) + 'px'
            // 上边第一个框;
            document.getElementById('itemId1').style.paddingTop = (viewHeight * 0.239) + 'px'
            document.getElementById('itemId1').style.marginTop = (viewHeight * 0.07) + 'px'
            // 第二个框;
            document.getElementById('itemId2').style.paddingTop = (viewHeight * 0.389) + 'px'
            // 底部框;
            document.getElementById('contBottomId').style.paddingTop = (viewHeight * 0.167) + 'px'

            let newSize
            if (viewWidth >= viewHeight) {
                newSize = viewHeight
            } else {
                newSize = viewWidth
            }

        }
    </script>
</head>

<body id="bodyBox">
<div class="home" id="status1">
    <div>
        <div class="title">首衡高碑店国际农产品交易中心</div>
        <div class="huanying">欢迎您</div>
        <div class="state">
            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                等待车辆进场中...
            </div>
        </div>
    </div>
</div>
<div class="content" id="status2" style="display: none;">
    <div class="content-title">首衡高碑店国际农产品交易中心</div>
    <div class="cont">
        <div class="cont-top">
            <div class="item item1" id="itemId1">
                <div class="item1-box">
                    <div class="car">
                        <img id="car-img" src="./static/img/sg-car-vertical.png" alt="" />
                    </div>
                    <div class="car-no">
                        <div class="car-text" id="carNo"></div>
                    </div>
                </div>
            </div>
            <div class="item item2" id="itemId2">
                <div class="item2-box">
                    <div class="itemView">
                        <div class="icon-box">
                            <img class="icon" src="./static/img/sg-cion2.png" alt="">
                        </div>
                        <div class="til">预约车型</div>
                        <div class="con con2">
                            <div class="con2-car-type" id="subCarType"></div>
                        </div>
                    </div>
                    <div class="itemView">
                        <div class="icon-box">
                            <img class="icon" src="./static/img/sg-cion3.png" alt="">
                        </div>
                        <div class="til">预约品类</div>
                        <div class="con con3" id="subProdName"></div>
                    </div>
                    <div class="itemView">
                        <div class="icon-box">
                            <img class="icon" src="./static/img/sg-cion4.png" alt="">
                        </div>
                        <div class="til">车辆重量</div>
                        <div class="con con4" id="weight"></div>
                    </div>
                    <div class="itemView">
                        <div class="icon-box">
                            <img class="icon" src="./static/img/sg-cion5.png" alt="">
                        </div>
                        <div class="til">扣费金额</div>
                        <div class="con con5" id="realAmount"></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="cont-bottom" id="contBottomId">
            <div class="cont-bottom-box">
                <div class="cont-bottom-text">
                    <div class="message-box" id="message"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./static/js/jquery-3.3.1.min.js"></script>
<script src="./static/js/VoiceUtil.js"></script>
<script>
    $(document).ready(function() {
        // var tipsRemoteAdr = window.location.host;
        var tipsRemoteAdr = '127.0.0.1:8999';
        console.log(tipsRemoteAdr, "tipsRemoteAdr");
        var statusArr = [1, 2]
        var interval = 500;
        setTimeout(function() {
            reloadVoices();
            setInterval(sendRequest, interval);
        }, 1000);
        function sendRequest(){
            let res = { "code": "200", "message": "SUCCESS", "data": {"status": 2,  "carNo": "冀T88888", "subCarType": "重型前四后六8.6-9.6", "subProdName": "蔬菜", "weight": "12000", "realAmount": "100.5", "voiceMsg": "开始称重 请保持车辆稳定!", "errorMsg": "称重完成, 自动结算中 首衡高碑店国际农产品交易中心" }, "extInfo": null }
            if(res.code == '200'){
                displayDiv(res.data);
            }
            // $.ajax({
            //     type: "GET",
            //     url: "http://" + tipsRemoteAdr + "/lpr/tips",
            //     dataType: "json",
            //     success: function(res) {
            //         // console.log(res, "res");
            //         if(res.code == '200'){
            //             displayDiv(res.data);
            //         }
            //     }
            // });
        }
        function displayDiv(data){
            //隐藏
            for (let i = 0; i < statusArr.length; i++) {
                $("#status" + statusArr[i]).hide();
            }
            //参数
            if(data.carNo != null && data.carNo != ''){
                $("#carNo").html(data.carNo);
            }
            if(data.subCarType != null && data.subCarType != ''){
                $("#subCarType").html(data.subCarType);
            }
            if(data.subProdName != null && data.subProdName != ''){
                $("#subProdName").html(data.subProdName);
            }
            if(data.weight != null && data.weight != ''){
                $("#weight").html(data.weight + " KG");
            }
            if(data.realAmount != null && data.realAmount != ''){
                $("#realAmount").html(data.realAmount + " 元");
            }
            // 消息
            if(data.errorMsg != null && data.errorMsg != ''){
                $("#message").html(data.errorMsg);
            }
            $("#status" + data.status).show();
            if(data.status == 1){
                clearVoices();
            }else{
                // 音频
                if(data.voiceMsg != null && data.voiceMsg != ''){
                    if(!voiceHasArr.includes(data.voiceMsg)){
                        voiceToArr.push(data.voiceMsg);
                    }
                    playVoice();
                }
            }
        }
    });
</script>
<script>
    let subCarTypeInterval, messageInterval
    clearInterval(subCarTypeInterval)
    clearInterval(messageInterval)
    function stringRollLeft (elementId, scrollAmount = 1) {
        let marqueeElement = document.getElementById(elementId);
        let viewWidth = marqueeElement.offsetWidth
        let totalWidth = marqueeElement.scrollWidth
        let offsetValue = marqueeElement.style.right ? parseInt(marqueeElement.style.right) : 0;
        if (viewWidth < totalWidth) {
            offsetValue += scrollAmount // 每次滚动的像素数
            marqueeElement.style.right = offsetValue + 'px'
        }
        let howLong = Math.abs(offsetValue)
        if (howLong >= (totalWidth - 0.6 * viewWidth)) {
            marqueeElement.style.right = 0 + 'px'
        }
    }
    // 设置滚动间隔（例如每秒30次）
    subCarTypeInterval = setInterval(() => {
        stringRollLeft('subCarType', 2)
    }, 30)
    messageInterval = setInterval(() => {
        stringRollLeft('message', 2)
    }, 30)

</script>
</html>
